<template>
	<view class="page">
		<!-- 订单状态 -->

		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>{{orderData.statusTxt}}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="shipping-address" v-if="!orderData.is_self_pickup">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{orderData.addressData.name}}</text>
				<text>{{orderData.addressData.mobile}}</text>
			</view>
			<view class="address">
				<text>{{orderData.addressData.address}}</text>
			</view>
		</view>
		<view class="shipping-address" v-else>
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>自提</text>
				<text>{{orderData.name}}</text>
			</view>
			<view class="address">
				<text>{{orderData.phone}}</text>
			</view>
		</view>

	

		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list">
					<view class="thumb">
						<image :src="orderData.title_img" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{orderData.title}}</text>
						</view>
						<view class="num-size">
							<text v-for="(el,idx) in orderData.attribute" :key="idx">{{el._key}}: {{el._value}}</text>
						</view>
						<view class="price">
							<text>起拍价：￥{{orderData.start_price}}</text>
						</view>
						<view class="price">
							<text>加价幅度：￥{{orderData.add_price}}</text>
						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view> -->
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{orderData.order_sn}}</text>
						<text class="btn">复制</text>
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{orderData.ctime}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">订单更新时间:</view>
					<view class="content">
						<text>{{orderData.uptime}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">支付方式:</view>
					<view class="content">
						<text>在线支付</text>
					</view>
				</view>
			</view>
		</view>


		<view class="order-info" v-if="!orderData.is_self_pickup && store_id && orderData.status == 4">
			<view class="info-list">
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>普通快递</text>
					</view>
				</view>
				<view class="list">
					<view class="title">快递公司:</view>
					<view class="content">
						<input v-model="express_name" type="text" placeholder="请输入快递公司">
					</view>
				</view>
				<view class="list">
					<view class="title">快递单号:</view>
					<view class="content">
						<input v-model="express_order" type="text" placeholder="请输入快递单号">
					</view>
				</view>
			</view>
		</view>
		
		<view class="order-info" v-if="orderData.status != 4 && orderData.express_name">
			<view class="info-list">
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>普通快递</text>
					</view>
				</view>
				<view class="list">
					<view class="title">快递公司:</view>
					<view class="content">
						<text>{{orderData.express_name}}</text>
						<!-- <input v-model="express_name" type="text" placeholder="请输入快递公司"> -->
					</view>
				</view>
				<view class="list">
					<view class="title">快递单号:</view>
					<view class="content">
						<text>{{orderData.express_order}}</text>
						<!-- <input v-model="express_order" type="text" placeholder="请输入快递单号"> -->
					</view>
				</view>
			</view>
		</view>
		
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				
				<view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text>+￥{{orderData.express_fee}}</text>
					</view>
				</view>
				<view class="list action">
					<view class="title">
						<text>成交价：</text>
					</view>
					<view class="price">
						<text>￥{{(orderData.now_price-0)}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btn">
			<!-- <view class="del">
				<text>删除订单</text>
			</view>
			<view class="btn">
				<text>查看发票</text>
				<text class="action">确认付款</text>
			</view> -->
		
			<view class="btn" v-if="orderData.status == 4 && store_id">
				<text class="action" @click="confimOrderExpress">提交</text>
			</view>
			
			<view class="btn" v-if="orderData.status == 5 && !store_id">
				<text class="action" @click="confimOrder">确认收货</text>
			</view>

			<view class="btn" v-if="orderData.status == 6">
				<text class="action" @click="delOrder">删除订单</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		delAuctionOrde,
		orderComment,
		getAuctionOrderById,
		saveAuctionOrde
	} from '@/config/api.js';
	export default {
		data() {
			// const goods = uni.getStorageSync('_auOrderInfo');
			return {
				queryList: {
					id: ''
				},
				nav_id: null,
				store_id:null,
				express_name: '',
				express_order: '',
				orderData: {},
			};
		},

		onLoad(options) {
			console.log(options,'=======')
			if(options.nav_id&&options.nav_id!='null'){
				this.nav_id = options.nav_id;
				this.store_id = options.store_id;
			}
			this.queryList.id = options.oderId;
			getAuctionOrderById(this.queryList).then(res => {
				this.orderData = res;
			})
		},

		methods: {
			confimOrder(){
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要收货？',
					success: function(res) {
						if (res.confirm) {
							saveAuctionOrde({
								id: _this.orderData.id,
								status: 6
							}).then(res => {
								uni.$u.toast('成功！')
							})
				
				
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			comment() {
				const _this = this;
				uni.showModal({
					title: '请填写评论内容',
					editable: true,
					placeholderText: '请填写评论内容',
					success: function(res) {
						if (res.confirm) {
							orderComment({
								id: _this.orderData.id,
								content: res.content
							}).then(res => {
								uni.$u.toast('操作成功！')
							})
							// saveOrder({
							// 	id: _this.orderData.id,
							// 	status: 4
							// }).then(res => {

							// })


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delOrder() {
				const _this = this;
				const data = {
					id: this.orderData.id,
				}
				if(this.store_id){
					data['store_id'] = this.store_id;
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除该订单？',
					success: function(res) {
						if (res.confirm) {
							delAuctionOrde(data).then(res => {
								uni.$u.toast('操作成功！')
							})


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancelOrder() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单？',
					success: function(res) {
						if (res.confirm) {
							saveOrder({
								id: _this.orderData.id,
								status: 5
							}).then(res => {
								uni.$u.toast('操作成功！')
							})


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			confimOrderExpress() {
				
				if(!this.orderData.is_self_pickup){
					if (!this.express_name ) return uni.$u.toast('请填写快递公司！')
					if (!this.express_order) return uni.$u.toast('请填写快递单号！')
					saveAuctionOrde({
						id: this.orderData.id,
						express_name: this.express_name,
						express_order: this.express_order,
						status: 5
					}).then(res => {
						uni.$u.toast('成功！')
					})
				}else{
					saveAuctionOrde({
						id: this.orderData.id,
						status: 5
					}).then(res => {
						uni.$u.toast('成功！')
					})
				}
			},
			/**
			 * 售后点击
			 */
			onApplyAftersales() {
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
</style>
